<template>
	<el-form ref="formObj" :model="props.formData" :rules="rules" label-width="80px">
		<el-form-item label="星期" prop="weekDay">
			<el-select-v2 
				v-model="props.formData.weekDay"
				:options="api.weeks"
				placeholder="请选择星期"/>
		</el-form-item>
		<el-form-item label="食品类别" prop="mealType">
			<el-select-v2
				v-model="props.formData.mealType"
				:options="api.meal_type"
				placeholder="请选择食品类别"></el-select-v2>
		</el-form-item>
		<el-form-item label="口味" prop="taste">
			<el-select-v2
				v-model="props.formData.taste"
				:options="api.tastes"
				placeholder="请选择口味"></el-select-v2>
		</el-form-item>
		<el-form-item label="食品" prop="foodId">
			<el-select-v2
				filterable
				v-model="props.formData.foodId"
				:options="api.getFoodOptions"
				:props="{
					'value': 'id',
					'label': 'name'
				}"
				placeholder="请选择口味"></el-select-v2>
		</el-form-item>
		<el-form-item>
			<el-button type="primary" @click="props.save">保存</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup>
import { ref } from 'vue'
import api from '@/api/mealapi'
import { PictureFilled } from '@element-plus/icons-vue'
const props = defineProps(['formData', 'rules', 'save', 'fileList'])
const formObj = ref()
console.dir(api.getFoodOptions)
function changeImg(uploadFile) {
	props.formData.file = uploadFile.raw
}
function removeImg() {
	props.formData.file = null
}
defineExpose({
	formObj
})
</script>

<style scoped lang="scss">
.upload {
	width: 150px;
	height: 150px;
	overflow: hidden;
}
</style>